<template>
	<view class="ship-reback">
		<p class="page-title">
			<navigator class="backIcon" url="/pages/traffic/index">
				<uv-icon color="#fff" name="arrow-left" size="22"></uv-icon>
			</navigator>
			{{fromCityName}}-{{toCityName}}
		</p>
	</view>
	<view class="round-content round-content-reback" style="font-size: 27rpx;">
		<view style="padding-top: 32rpx;display: flex;">
			<view style="margin-right: auto;">
				<view class="right-round"
					style="background-color: #fc9139;width: 100rpx;color: #fff;text-align: center;">
					出发
				</view>
				<p style="padding-left: 30rpx;margin-top: 20rpx;">{{showDate}}</p>
			</view>
			<view @click="go_map(Seats.FromPortName)"
				style="width: 120rpx;display: flex;align-items: center;flex-direction: column;">
				<uv-icon name="map-fill" color="#47c1fe" size="20"></uv-icon>
				上船地址
			</view>
		</view>
		<view class="flight-msg" style="border-radius: 25rpx;">
			<view class="l">
				<p class="time">{{Seats.DepartTime}}</p>
				<p>{{Seats.FromPortName}}</p>
			</view>
			<view class="m">
				<p>{{Seats.duration}}</p>
				<uv-icon width="180rpx" height="30rpx" name="/static/traffic/icon/goto.png"></uv-icon>
				<p>{{Seats.ShipName}}</p>
			</view>
			<view class="r">
				<p class="time">{{Seats.ArriveTime}}</p>
				<p>{{Seats.ToPortName}}</p>
			</view>
		</view>
	</view>
	<view class="seat-list">
		<view :class="['seat-item', item.TicketLeft<1?'no-seat':'']" :key="item.cabinId" v-for="item in Seats.Seats">
			<view class="l">
				<uv-image width="180rpx" height="180rpx" src="https://cdn.uviewui.com/uview/album/1.jpg" shape="square"
					radius="20rpx"></uv-image>
				<view style="padding: 20rpx;">
					<p class="tit">{{item.SeatName}}</p>
					<p class="tit" style="color: grey">{{item.title}}</p>
					<p class="tit" style="color: grey">{{item.content}}</p>
				</view>
			</view>
			<view class="r" @click="navigateTo(item)">
				<p class="price">
					￥<span>{{item.TicketPriceTypeList[0].TicketPrice}}</span>
				</p>
				<a style="text-decoration: none;" href="javascript:;">预定</a>
				<p class="count">
					剩{{item.TicketLeft}}张
				</p>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getDateText
	} from '@/common/public.js'

	export default {
		data() {
			return {
				nowLine: {}, //当前航线
				Seats: [{
					a: 1
				}, {
					a: 2
				}, {
					a: 2
				}, {
					a: 2
				}, {
					a: 2
				}],
				showDate: '',
				fromCityName: '',
				toCityName: '',
				currentItem: [] //当前选择套餐日期对象
			}
		},
		onLoad(op) {
			this.initSeatData(op.date)
			this.fromCityName = op.fromCityName
			this.toCityName = op.toCityName
		},
		methods: {
			navigateTo(item) {
				uni.navigateTo({
					url: '/pages/traffic/buy?SeatName=' + item.SeatName
				})
			},
			initSeatData(dateStr) {
				this.Seats = uni.getStorageSync('selectSeatData')

				//日期显示处理
				var date = new Date(dateStr);
				var month = (date.getMonth() + 1) > 9 ? (date.getMonth() + 1) : '0' + (date.getMonth() +
					1);
				var day = date.getDate() > 9 ? date.getDate() : '0' + date.getDate();
				var text = getDateText(date, true);
				this.showDate = month + '月' + day + '日 ' + text;

			},
			//跳qq地图
			go_map(FromPortName) {
				uni.navigateTo({
					url: 'https://apis.map.qq.com/uri/v1/search?keyword=' + FromPortName +
						'&region=北海&referer=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77'
				})
			}
		}
	}
</script>

<style scoped>
	page {
		background-color: #f1f3f8;
		height: 100%;
	}

	.ship-reback {
		height: 500rpx;
		background-image: url('/static/home/bg/bg-head.png');
	}

	.backIcon {
		float: left;
	}

	.page-title {
		text-align: center;
		color: #fff;
		padding-top: 100rpx;
	}

	.round-content-reback {
		margin-top: -16%;
	}

	.round-content {
		border-radius: 25rpx;
		background-color: #fff;
		width: calc(100vw - 2rem);
		margin-left: 1rem;
	}

	.right-round {
		border-top-right-radius: 25rpx;
		border-bottom-right-radius: 25rpx;
	}

	.flight-msg {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		padding: 1rem;
		background: #fff;

	}

	.flight-msg .l,
	.flight-msg .r {
		width: 37%;
	}

	.flight-msg .l p,
	.flight-msg .r p {
		font-size: .85rem;
		color: #3D3E3D;
	}

	.flight-msg .l p.time,
	.flight-msg .r p.time {
		font-size: 1.2rem;
		font-weight: 700;
	}

	.flight-msg .m {
		width: 28%;
	}

	.flight-msg .m p {
		text-align: center;
		color: #707070;
		font-size: .9rem;
	}

	.flight-msg .m img {
		width: 80%;
		display: block;
		margin: 0 auto;
	}

	.flight-msg .r p {
		text-align: right;
	}

	.seat-list {
		background-color: #f1f3f8;
		padding: 1rem 1rem 2rem;
	}

	.seat-item {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-pack: justify;
		-ms-flex-pack: justify;
		justify-content: space-between;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		background: #fff;
		padding: .5rem;
		border-radius: .5rem;
		margin-bottom: 1rem;
	}

	.seat-item .l {
		width: 60%;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}

	.seat-item .l .tit {
		font-size: 30rpx;
	}

	.seat-item .r {
		text-align: center;
	}

	.seat-item .r .price {
		color: #FF7D0E;
		font-size: .9rem;
	}

	.seat-item .r a {
		display: inline-block;
		color: #fff;
		background: #FF7D0E;
		width: 4rem;
		text-align: center;
		height: 2rem;
		line-height: 2rem;
		font-size: .9rem;
		border-radius: .3rem;
	}

	.seat-item .r .count {
		font-size: .8rem;
		color: #ADADAD;
		text-align: center;
	}
</style>